<template>
  <el-dialog
    title="规则测试"
    :close-on-click-modal="false"
    width="70%"
    :visible.sync="visible">

    <el-tabs type="border-card" v-model="tabsValue">
      <el-tab-pane label="案例选择" name="case" key="case" class="tab">
        <el-table
          :data="dataList"
          border
          @selection-change="handleSelectionChange"
          style="width: 98%;">
          <el-table-column
            type="selection"
            header-align="center"
            width="50">
          </el-table-column>

          <el-table-column
            prop="caseName"
            header-align="center"
            align="center"
            label="案例名称">
          </el-table-column>

          <el-table-column
            prop="remark"
            header-align="center"
            align="center"
            label="备注">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="测试结果" name="result" key="result" class="tab">
        <el-table
          :data="resultDataList"
          border
          style="width: 98%; ">
          <el-table-column
            prop="caseName"
            header-align="center"
            align="center"
            label="案例名称">
          </el-table-column>
          <el-table-column
            prop="useTime"
            header-align="center"
            align="center"
            label="耗费时长">
            <template slot-scope="scope">
              <span>{{scope.row.useTime}} ms</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="resultMsg"
            header-align="center"
            align="center"
            label="结果">
            <template slot-scope="scope">
              <span v-html="scope.row.resultMsg"></span>
            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
    </el-tabs>

    <span slot="footer" class="dialog-footer" v-if="tabsValue=='case'">
      <el-button @click="dataFormSubmit">测试</el-button>
      <el-button @click="visible = false">返回</el-button>
    </span>
    <span slot="footer" class="dialog-footer" v-else>
          <el-button @click="dataFormSubmit">重新测试</el-button>
          <el-button @click="visible = false">关闭</el-button>
    </span>


  </el-dialog>


</template>

<script>
    import {listInterfaceCase, batchTest} from '@/api/testCase/interfaceCase'

    export default {
        data() {
            return {
                tabsValue: 'case',
                resultDataList: [],
                dataList: [],
                multipleSelection: [],
                visible: false
            }
        },
        created() {

        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val
                // console.log(this.multipleSelection)
            },

            init(sceneIdentify) {
                this.dataList = []
                this.resultDataList = []
                this.visible = true
                this.tabsValue = 'case'

                if (sceneIdentify) {
                    let params = {
                        scene_identify: sceneIdentify,
                        is_effect: '1'
                    }
                    listInterfaceCase(params).then(res => {
                        if (res.data.data && res.data.resultCode === 0) {
                            this.dataList = res.data.data
                        }
                    })
                }
            },


            // 表单提交
            dataFormSubmit() {
                if (this.multipleSelection.length <= 0) {
                    this.$message.error('请选择要测试的报文内容')
                    return
                }

                let params = {
                    ids: JSON.stringify(this.multipleSelection)
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                batchTest(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    this.resultDataList = []
                    this.tabsValue = 'result'

                    res.data.data.forEach(item => {
                        if (item.result) {
                            let result = JSON.parse(item.result)
                            item.result = JSON.stringify(result, null, 4)
                        }
                        this.resultDataList.push(item)
                    })

                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                })
            }
        }
    }
</script>

<style lang="scss">
  .temp_content {
    height: 400px;
    overflow-y: scroll;
  }

  .title {
    padding: 10px;
    background-color: rgba(248, 248, 248, 1);
    margin-bottom: 10px;
  }

  .el-table__row .el-form-item__content {
    margin-left: 0 !important;
  }

  .el-table__row .el-form-item {
    margin-bottom: 0 !important;
  }

  .btn-span {
    display: block;
    text-align: center;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    cursor: pointer;
  }

  .mr10 {
    margin-right: 10px;
  }

  .el-tabs--border-card > .el-tabs__content {
    padding: 0 !important;
    height: auto!important;
  }

  .tab{
    padding: 20px 0;
    border: #dcdfe6 solid 1px;
     border-top: 0;
    .el-table--border{
      margin: 0 auto;
    }
  }
</style>
